// @ts-nocheck
import SingleTip from "@/components/SingleTip";
import React from "react";
import { Button, Checkbox, Collapse, Spin, Pagination, Space, Typography } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import language from "@/locales/zh_cn";

const { Panel } = Collapse;
const { Text } = Typography;

interface Props {
  data: any[];
  actived: any;
  total: number;
  searchValues: any;
  loading: boolean;
  setSearchValues: (values: any) => void;
  onBatchOrderClick: (order: any) => void;
  searchHandle: () => void;
}

const OrderTree: React.FC<Props> = ({
  data,
  actived,
  total,
  loading,
  searchValues,
  setSearchValues,
  onBatchOrderClick,
  searchHandle,
}) => {
  // const language = useLanguage();

  return (
    <div className="flex flex-col h-full">
      <div className="order-form">
      </div>
      <div className="flex-1 relative overflow-auto">
        <div className="absolute right-0 top-0 z-10">
          {/* <Button 
            icon={<ReloadOutlined />} 
            onClick={searchHandle} 
            loading={loading}
            type="primary"
            ghost
          /> */}
        </div>
        <div className="h-full">
          <Spin spinning={loading} tip="加载中...">
            <Collapse>
              {data?.map(item => (
                <Panel key={item.id} header={item.work_order_num}>
                  <Space direction="vertical" className="w-full">
                    {item.batch_order_list?.map(batch => {
                      const {
                        id, batch_order_num, product_name, product_encode, product_specs, delivery_date,
                        current_mbom_num,
                      } = batch;
                      const is_active = actived?.batch_order_id === id;

                      return (
                        <div
                          key={id}
                          className={`p-4 border rounded-lg cursor-pointer hover:bg-gray-50 ${
                            is_active ? 'border-blue-500 bg-blue-50' : 'border-gray-200'
                          }`}
                          onClick={() => onBatchOrderClick(batch)}
                        >
                          {is_active && (
                            <Checkbox checked className="absolute right-4" />
                          )}
                          <Space direction="vertical" className="w-full">
                            <div className="flex items-center">
                              <Text className="w-20 text-gray-500">单号</Text>
                              <Text className="flex-1">{batch_order_num}</Text>
                            </div>
                            <div className="flex items-center">
                              <Text className="w-20 text-gray-500">产品名称</Text>
                              <Text className="flex-1">
                                <SingleTip content={product_name} />
                              </Text>
                            </div>
                            <div className="flex items-center">
                              <Text className="w-20 text-gray-500">{language.product_encode}</Text>
                              <Text className="flex-1">{product_encode}</Text>
                            </div>
                            <div className="flex items-center">
                              <Text className="w-20 text-gray-500">产品规格</Text>
                              <Text className="flex-1">
                                <SingleTip content={product_specs} />
                              </Text>
                            </div>
                            <div className="flex items-center">
                              <Text className="w-20 text-gray-500">交期</Text>
                              <Text className="flex-1">{delivery_date}</Text>
                            </div>
                            <div className="flex items-center">
                              <Text className="w-20 text-gray-500">当前工序</Text>
                              <Text className="flex-1">{current_mbom_num}</Text>
                            </div>
                          </Space>
                        </div>
                      );
                    })}
                  </Space>
                </Panel>
              ))}
            </Collapse>
          </Spin>
        </div>
      </div>
      <div className="flex justify-center mt-4 sticky-pagination">
        <Pagination
          simple
          total={total}
          current={searchValues?.current}
          onChange={(current) => {
            setSearchValues({ current });
          }}
        />
      </div>
    </div>
  );
}

export default OrderTree;
